<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轻量级树形菜单演示</title>
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="JS/TreeBySHF/TreeBySHF.css" type="text/css" />
    <![endif]-->
    <link rel="stylesheet" href="Style/index.css" type="text/css" />
</head>

<body>
	<div id="TreeContainer"></div>
	<div id="RightContainer">
	    <form action="TreeEdit.php" method="post">
	        <p>名称：<input type="text" id="NavName" name="NavName" /><input type="text" id="hidaction" name="action" value="Mod"><input type="hidden" id="ID" name="ID" /></p>
	        <p>父级：<input type="text" id="PID" name="PID" /></p>
	        <p>顺序：<input type="text" id="OrderID" name="OrderID" /></p>
	        <p>链接：<input type="text" id="NavigateUrl" name="NavigateUrl" /></p>
	        <p>目标：<input type="text" id="Target" name="Target" /></p>
	        <p>描述：<input type="text" id="Remark" name="Remark" /></p>
	        <p>图标：<input type="text" id="ImgUrl" name="ImgUrl" /></p>
	        <p>编辑：<input type="text" id="EditUrl" name="EditUrl" /></p>
	        <p>状态：
	            <select id="Status" name="Status">
	                <option value="1">启用</option>
	                <option value="0">禁用</option>
	            </select>
	        </p>
	        <p>
	            <input type="submit" id="btnAddRootNode" value="添加根节点" id="AddRoot" />
	            <input type="submit" id="btnAddNode" value="添加节点" id="AddNode" />
	            <input type="submit" id="btnModNode" value="修改节点" id="ModNode" />
	            <input type="submit" id="btnDelNode" value="删除节点" id="DelNode" />
	        </p>
	    </form>
	</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="JS/TreeBySHF/TreeBySHF.js"></script>
<script type="text/javascript">
    function LoadAjaxData(ServiceURL,strData, objFuncName, isCached) {
        $.ajax({
            url: ServiceURL,
            type: "POST",
            dataType: "json",
            //contentType: "application/json; charset=utf-8",
            //contentType: "text/json; charset=UTF-8",
            data:strData,
            cache: isCached,
            success: function (data) {
                objFuncName(data);
            },
            error: function (jqXHR) {
                document.write(jqXHR.responseText);
                //alert(jqXHR.responseText);
            }
        })
    }

    $(document).ready(function(){
    	SetBtnEvent();
        LoadTree();
    })
    
    //加载语法树数据
    function LoadTree() {
        LoadAjaxData("GetTreeData.php","", BindTree, true);
    }
    //绑定树性菜单
    function BindTree(data)
    {
        $.TreeBySHF.BindTree({ tvData: data, TreeContainerID: "TreeContainer",funName:NodeClick,OptParamValue:1 });
    }
    function SetBtnEvent()
    {
        $("#btnAddRootNode").click(function(){
            $("#hidaction").val("Add");
            $("#PID").val("0");
        })
        $("#btnAddNode").click(function(){
            $("#hidaction").val("Add");
            $("#PID").val($("#ID").val());
        })
        $("#btnModNode").click(function(){
            $("#hidaction").val("Mod");
        })
        $("#btnDelNode").click(function(){
            $("#hidaction").val("Del");
        })
    }
    function NodeClick(obj)
    {
    	LoadAjaxData("TreeNodeGet.php","id="+obj.attr("NodeID")+"", BindNodeInfo, true);
    }
    function BindNodeInfo(data)
    {
        if(data.length>0){
            $("#ID").val(data[0].ID);
            $("#NavName").val(data[0].NavName);
            $("#PID").val(data[0].PID);
            $("#ImgUrl").val(data[0].ImgUrl);
            $("#OrderID").val(data[0].OrderID);
            $("#NavigateUrl").val(data[0].NavigateUrl);
            $("#Target").val(data[0].Target);
            $("#Remark").val(data[0].Remark);
            $("#Status").val(data[0].Status);
            $("#EditUrl").val(data[0].EditUrl);
        }
    }
</script>
</body>
</html>